<template>
    <div :class="`detail-exporess-info ${mode}`">
        <div class="back-address">
            <div class="title title-color">退货地址</div>
            <div class="content">
                <div>{{info.address}}</div>
                <div>{{info.contact}} {{info.mobile}}</div>
            </div>
        </div>
        <div class="express-number">
            <div class="title title-color">退货单号</div>
            <template v-if="isShow">
                <div class="content">{{info.platform_no}}</div>
            </template>
            <template v-else>
                <div class="select-express" @click="selectExpress">
                    <div :class="`value title-color ${expressName ? '' : 'tip'}`">{{expressName || '请选择物流公司'}}</div>
                    <MiniIcon name="right" :size="16" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
                </div>
                <Field class="express-number-value" placeholder="输入快递单号" v-model="expressNumber" />
                <Button class="action-btn tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="ensureAction">确认寄出</Button>
            </template>
        </div>
        <SelectExpress ref="express" @ensure="ensureSelect" :expressList="expressList" :mode="mode" :styleMode="styleMode" :theme="theme" />
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { MiniIcon } from '@components/base';
import { Button, Field } from 'vant';
import SelectExpress from './SelectExpress';
import { TipError, TipSuccess } from '@common/tip';
import ModeMixin from '@common/mixin';
export default {
    name: 'DetailExpressInfo',
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        Button,
        Field,
        SelectExpress,
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
        info: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            expressName: '',
            expressNumber: '',
            expressId: 0,
        };
    },
    computed: {
        ...mapState({
            expressList: state => state.shopOrder.expressList,
        }),
    },
    async mounted() {
        await this.getAvailableExpressList();
    },
    methods: {
        ...mapActions([
            'getAvailableExpressList',
        ]),
        selectExpress() {
            this.$refs.express.show();
        },
        ensureSelect(value) {
            this.expressName = value.name;
            this.expressId = value.id;
        },
        ensureAction() {
            if (!this.expressId || !this.expressNumber) {
                TipError('快递信息不能为空！');
                return;
            }
            // 确定寄出，添加快递信息
            this.$emit('express', {
                name: this.expressName,
                number: this.expressNumber,
                id: this.expressId,
            });
        },
    },
};
</script>

<style lang="less">
.detail-exporess-info {
    .m-h(@shop-bag-gap);
    .mode-white();
    border-radius: @border-radius;
    .shop-boxshadow();
    .p-h(@shop-bag-gap);
    .p-v(@gap-md);
    .m-t(@shop-bag-gap);
    &.black {
        .select-express,
        .express-number-value {
            color: @black-title-color;
            border-color: @tip-color;
            &::after {
                display: none;
            }
        }
    }
    .title {
        font-size: @font-size-md;
        font-weight: 500;
        color: @text-color;
    }
    .content {
        font-size: @shop-font-size;
        color: @tip-color;
        .m-t(@shop-gap);
    }
    .back-address {
        .m-b(@gap-lg);
    }
    .select-express,
    .express-number-value {
        border: @border;
        .p-v(0);
        .p-h(@shop-gap);
        height: 35px;
        line-height: 35px;
        border-radius: @border-radius / 2;
        .m-t(@shop-bag-gap);
        font-size: @shop-font-size;
    }
    .select-express {
        .flex();
        align-items: center;
        justify-content: space-between;
        .tip {
            color: @tip-color;
        }
    }
    .action-btn {
        .m-t(@shop-gap-md);
        .m-b(@shop-gap);
    }
}
</style>
